import { FC, useMemo } from 'react'
import { Tabs } from 'antd'
import type { TabsProps } from 'antd'
import TablePage from './TablePage'
import Form from './Form'
import FormParams from './FormParams'
import Select from './Select'
import Upload from './Upload'

const Demo: FC = () => {
  const items: TabsProps['items'] = useMemo(
    () => [
      {
        key: '1',
        label: '表格和分页',
        children: <TablePage />
      },
      {
        key: '2',
        label: '表单',
        children: <Form />
      },
      {
        key: '3',
        label: '表单参数',
        children: <FormParams />
      },
      {
        key: '4',
        label: '无限下拉',
        children: <Select />
      },
      {
        key: '5',
        label: '上传和预览',
        children: <Upload />
      }
    ],
    []
  )

  return <Tabs defaultActiveKey="4" items={items} />
}

export default Demo
